<template>
  <div :class="classes.myForm">
    <vxe-form
        :data="formData"
        :rules="formRule"
        @submit="submitEvent"
        @reset="resetEvent">
      <vxe-form-item title="代码" field="dm" :item-render="{}" span="8">
        <template #default="{ data,field }">
          <vxe-input
              v-model="data[field]"
              :clearable="isEdit"
              :readonly="!isEdit"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="字典类别" field="zdlb" :item-render="{}" span="8">
        <template #default="{ data,field }">
          <my-down-list
              v-model="data[field]"
              zdlb="SYS_COMMON_ZDLB"
              :clearable="isEdit"
              :readonly="!isEdit"
          >
          </my-down-list>
        </template>
      </vxe-form-item>
      <vxe-form-item title="名称" field="mc" :item-render="{}" span="8">
        <template #default="{ data,field }">
          <vxe-input
              v-model="data[field]"
              :clearable="isEdit"
              :readonly="!isEdit"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="排序" field="px" :item-render="{}" span="8">
        <template #default="{ data,field }">
          <vxe-input
              v-model="data[field]"
              :clearable="isEdit"
              :readonly="!isEdit"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="数据等级" field="sjdj" :item-render="{}" span="8">
        <template #default="{ data,field }">
          <my-down-list
              v-model="data[field]"
              zdlb="SYS_COMMON_DJ"
              :clearable="isEdit"
              :readonly="!isEdit"
          >
          </my-down-list>
        </template>
      </vxe-form-item>
      <vxe-form-item
          title="创建时间"
          field="cjsj"
          :item-render="{}"
          span="8"
          :visible="!isInsert"
      >
        <template #default="{ data,field }">
          <el-date-picker
              v-model="data[field]"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYYMMDDHHmmss"
              readonly
          >
          </el-date-picker>
        </template>
      </vxe-form-item>
      <vxe-form-item
          title="更新时间"
          field="gxsj"
          :item-render="{}"
          span="8"
          :visible="!isInsert"
      >
        <template #default="{ data,field }">
          <el-date-picker
              v-model="data[field]"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYYMMDDHHmmss"
              readonly
          >
          </el-date-picker>
        </template>
      </vxe-form-item>
      <vxe-form-item align="center" span="24" :item-render="{}" class-name="modalStickyBottom">
        <template #default>
          <vxe-button type="submit" status="primary" content="提交" v-show="isEdit"></vxe-button>
          <vxe-button content="关闭" @click="close"></vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script lang="ts" setup>
import {ref,defineEmits,computed} from 'vue'
import {VxeFormEvents} from '@majinju/vxe-pc-ui'
import classes from "@/components/MyForm/index.module.scss";
import {assignDeep} from "@/utils/common";
import SelectGridUtil from "@/utils/SelectGridUtil";
import MyDownList from "@/components/MyDownList";

const formRule = ref({
  dm: [{ required: true, message: "请输入代码" }],
  mc: [{ required: true, message: "请输入名称" }],
  zdlb: [{ required: true, message: "请输入字典类别" }],
  sjdj: [{ required: true, message: "请输入数据等级" }],
  px: [{ required: true, message: "请输入排序" }]
})
const formData = ref({
  sjdj: "06",
  px: "9999"
})
const props = defineProps({
  obj: Object,
  editMode: String,
  sgUtil: SelectGridUtil
})
const emit = defineEmits(['close']);
/**
 * 是否可编辑
 */
const isEdit = computed(() => {
  return props.editMode!=='detail'
})
/**
 * 是否新增
 */
const isInsert = computed(() => {
  return props.editMode==='insert'
})
const close = () => {
  emit('close');
}
assignDeep(formData.value, props.obj)
const submitEvent: VxeFormEvents.Submit = () => {
  props.sgUtil.htqq({
    yobj: formData.value,
    sys: {
      cllx:props.editMode
    }
  }).then((response: any) => {
    emit('close',true);
  })
}
</script>
